<template>
  <div>
<!--    <ul>-->
<!--      <router-link v-for="(item,index) in routerData" :key="index" :to="{path:item.route}" @click.native="flushRouter">{{item.title}}&emsp;</router-link>-->
<!--    </ul>-->
    <el-menu class="el-menu--popup" mode="horizontal" :default-active="defaultActive" router>
      <el-menu-item v-for="(item,index) in routerData" :key="index" :index="item.name" @click.native="flushRouter">
        <span>{{item.meta.title}}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'HeaderPage',
  inject: ['reload'],
  props: {
    routerData: Array
  },
  data:function(){
    return {
      defaultActive : ''
    }
  },
  methods: {
    flushRouter () {
      this.reload()
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(to) {
        if (to.fullPath.endsWith('home'))
        this.defaultActive = to.path // 给defaultActive重新赋值为当前组件的路由地址
      }
    }
  }
}
</script>
